<template>
  <div class="wrap">
    <div class="model">
      <div class="marBoxLeft">
        <header class="headerInfo">
          <div class="block">
            <p class="tag">{{tag}}</p>
          </div>
          <div class="userInfo">
            <img :src="userInfo.avatar" :onerror="defaultImg" alt />
            <div class="edit">
              <p>{{userInfo.username}}</p>
              <p>会员到期日：{{userInfo.end_time}}</p>
            </div>
          </div>
          <el-button type="primary" round @click="xufei">会员续费</el-button>
          <p class="link_" @click="sethistoryState">历史续费</p>
        </header>
        <div class="aurl">
          <p @click="selectModel(1)" :class="aUrlModel==1?'act':''">商家信息</p>
          <p @click="selectModel(2)" :class="aUrlModel==2?'act':''">商家账户</p>
          <p @click="selectModel(3)" :class="aUrlModel==3?'act':''">子账号</p>
          <p @click="selectModel(4)" :class="aUrlModel==4?'act':''">账号设置</p>
        </div>
      </div>
      <div class="modelView">
        <template v-if="aUrlModel==1">
          <div class="userInfo">
            <div class="head">
              <div class="infos">
                <img :src="userInfo.avatar" @click="userState=true" :onerror="defaultImg" alt />
              </div>
              <div class="plk">
                <p>商家名称:</p>
                <span>{{userInfo.username}}</span>
                <i @click="setUserName">修改</i>
              </div>
              <p class="types">
                账号类型:
                <span>{{userInfo.account_type==0?'主账号':'子账号'}}</span>
              </p>
            </div>
            <div class="code">
              <div class="qrcode" @click="qrcodeState = true">
                <img src="../assets/code.png" alt />
                <!-- <p>点击修改</p> -->
              </div>
              <div class="plk">
                <p>手机号码:</p>
                <span>{{phone}}</span>
                <i @click="setPhone">修改</i>
              </div>
              <p class="types">
                登陆密码:
                <span>******</span>
                <i @click="setPass">修改</i>
              </p>
            </div>
          </div>
        </template>
        <template v-if="aUrlModel==2">
          <div class="accountBox">
            <div class="titlts">
              <p>商家账户</p>
            </div>
            <div class="account">
              <p>
                账户余额:
                <span>￥500元</span>
              </p>
              <div class="btnBox">
                <p @click="xufeiState = true">充值</p>
                <p>提现</p>
              </div>
            </div>
            <div class="titlts" style="margin-top:30px">
              <p>账户明细</p>
            </div>
            <div class="searchTab">
              <p>交易类型:</p>
              <el-select v-model="value" style="margin-right:15px" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <el-date-picker
                v-model="value1"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </div>
            <el-table
              :data="tableData2"
              stripe
              style="width: 100%;margin-left:40px;margin-top:15px"
            >
              <el-table-column prop="date" label="日期"></el-table-column>
              <el-table-column prop="name" label="交易类型"></el-table-column>
              <el-table-column prop="address" label="交易项目"></el-table-column>
              <el-table-column prop="address" label="支付方式"></el-table-column>
              <el-table-column prop="address" label="交易金额"></el-table-column>
              <el-table-column prop="address" label="账户余额"></el-table-column>
            </el-table>
          </div>
        </template>
        <template v-if="aUrlModel==3">
          <div class="childrenList">
            <div class="titlts" style="margin-bottom:30px">
              <p>子账号</p>
            </div>
            <el-button type="primary" @click="addChildAcc">添加</el-button>
            <el-table :data="tableData" stripe style="width: 100%">
              <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
              <el-table-column prop="tel" label="账号" align="center"></el-table-column>
              <el-table-column prop="username" label="昵称" align="center"></el-table-column>
              <el-table-column prop="name" align="center" label="操作">
                <template slot-scope="scope">
                  <el-button type="primary" size="mini" @click="edit(scope.row)">修改</el-button>
                  <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="pageSum" v-if="tableData.length">
              <el-pagination
                background
                layout="total,prev, pager, next"
                :page-count="pageCount"
                :total="total"
                :page-size="pageSize"
                @current-change="currentMethods"
              ></el-pagination>
            </div>
          </div>
        </template>
        <template v-if="aUrlModel==4">
          <div class="option">
            <div class="titlts" style="margin-bottom:30px">
              <p>账号设置</p>
            </div>
            <div class="c">
              <!-- <img src="../assets/wrring.png" alt srcset /> -->
              <div>
                <div class="server">
                  <p>代发服务</p>
                  <el-switch
                    v-model="switchs"
                    active-color="#409EFF"
                    @change="substituteService"
                    active-value="1"
                    inactive-value="0"
                    inactive-color="#ff4949"
                  ></el-switch>
                  <span>{{ns}}</span>
                </div>
                <p class="iop">
                  根据您的服务性质选择是否提供该服务，开启后客户可正常提交代发，不开启则向用户显示“该商家
                  暂不提供该服务”
                </p>
              </div>
            </div>
            <div class="c">
              <!-- <img src="../assets/wrring.png" alt srcset /> -->
              <div>
                <div class="server">
                  <p>到货状态</p>
                  <el-switch
                    v-model="switchs2"
                    active-value="1"
                    inactive-value="0"
                    @change="setUpdateGet"
                    active-color="#409EFF"
                    inactive-color="#ff4949"
                  ></el-switch>
                  <span>{{ns2}}</span>
                </div>
                <p class="iop">
                  根据您的服务性质选择是否提供该服务，开启后在公众号商家端内修改订单到货状态时，向该客户显
                  示更变后的到货状态！
                </p>
              </div>
            </div>
          </div>
          <div class="option">
            <div class="titlts" style="margin-bottom:30px">
              <p>标签纸打印参数设置</p>
            </div>
            <p class="pdfSet" @click="showType(1)">A4宽47mm×高18.8mm 圆角60格（左右2m间隙）</p>
            <br />
            <p class="pdfSet" @click="showType(2)">A4宽48.5mmX高25.4mm 直角44枚（无间隙）</p>
          </div>
        </template>
      </div>
    </div>
    <setChildren :childrenState="childrenState" @getChildren="getChildren"></setChildren>
    <setUserInfo :userState="userState" :userInfo="userInfo" @getUser="getUser"></setUserInfo>
    <setPass :passworldState="passworldState" @getpass="getpass"></setPass>
    <setPhone :phoneState="phoneState" @getPhone="getPhone"></setPhone>
    <setchildrenItem :childrenItemState="childrenItemState" :userData="userData" @getitem="getitem"></setchildrenItem>
    <renew :renewState="renewState" :memberType="memberType" @get_renew="get_renew"></renew>
    <renewHistory :historyState="historyState" @getrenewHistory="getrenewHistory" />
    <pdfOptions
      :pdfOptionsState="pdfOptionsState"
      :optionsSelect="optionsSelect"
      @pdfOptions="pdfOptions"
    ></pdfOptions>
    <!-- 续费 -->
    <div class="xufei" v-if="xufeiState">
      <div class="cen">
        <div class="cen-tit">
          <p class="name">会员价格</p>
          <p class="cs" @click="close_xufei">关闭</p>
        </div>
        <div class="cardbox">
          <div
            :class="tabIndex==1?'item':'item item2'"
            @click="select(1)"
            style="margin-right:15px"
          >
            <div class="item-l">
              <span>捷报一年会员</span>
              <h3>{{memberPrice.m}}元</h3>
            </div>
            <div class="item-r">
              <p>选择</p>
              <i></i>
            </div>
          </div>
          <div :class="tabIndex==2?'item':'item item2'" @click="select(2)" style="margin-left:15px">
            <div class="item-l">
              <span>捷报半年会员</span>
              <h3>{{memberPrice.n}}元</h3>
            </div>
            <div class="item-r">
              <p>选择</p>
              <i></i>
            </div>
          </div>
        </div>
        <p class="price">实际支付：￥{{tabIndex==1?memberPrice.m:tabIndex==2?memberPrice.n:''}}元</p>
        <h4 @click="new_renew">立即续费</h4>
      </div>
    </div>
    <!-- 展示二维码 -->
    <div class="showQrcode" v-if="qrcodeState">
      <div class="cen">
        <div class="users">
          <div>
            <img :src="userInfo.avatar" :onerror="defaultImg3" alt />
            <p>{{userInfo.username}}</p>
          </div>
          <p class="cs" @click="qrcodeState = false">关闭</p>
        </div>
        <img :src="userInfo.qr_code" id="girlImg" class="qr" alt />
        <p class="scan">扫描图中二维码关注我</p>
        <div class="cj">
          <p @click="getQrcode(userInfo.qr_code)">保存二维码</p>
          <img src="../assets/download.png" alt />
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.pdfSet {
  margin-left: 110px;
  color: #409eff;
  border-bottom: 1px solid #409eff;
  display: inline-block;
  margin-bottom: 20px;
  cursor: pointer;
}
.pageSum {
  display: flex;
  margin: 15px;
  justify-content: center;
}

.titlts {
  display: flex;
  align-items: center;
  border-left: 4px solid #409eff;
  padding-left: 40px;
  p {
    color: #555;
    font-size: 14px;
    font-weight: bold;
  }
  img:nth-of-type(1) {
    display: block;
    width: 25px;
    margin-right: 40px;
  }
  img:nth-of-type(2) {
    display: block;
    width: 10px;
    margin-left: 5px;
  }
}
.model {
  overflow: hidden;
}
.modelView {
  float: left;
  width: 80%;
  height: 100vh;
  .userInfo {
    display: flex;
    justify-content: center;
    margin-top: 100px;
    .head {
      display: flex;
      justify-content: center;
      flex-direction: column;
      margin-right: 100px;
      .infos {
        display: flex;
        align-items: center;
        p {
          margin-left: 15px;
          color: #409eff;
          font-size: 14px;
        }
        img {
          width: 100px;
          height: 100px;
          object-fit: cover;
          border-radius: 50%;
          cursor: pointer;
        }
      }
      .plk {
        display: flex;
        align-items: center;
        margin: 30px 0;
        p {
          color: #999;
          font-size: 14px;
        }
        span {
          color: #555;
          font-size: 14px;
          margin-left: 15px;
        }
        i {
          color: #409eff;
          font-size: 14px;
          font-style: normal;
          margin-left: 15px;
          cursor: pointer;
        }
      }
      .types {
        color: #999;
        font-size: 14px;
        span {
          color: #999;
          margin-left: 15px;
        }
      }
    }
    .code {
      margin-left: 100px;
      .qrcode {
        display: flex;
        align-items: center;
        img {
          width: 100px;
          height: 100px;
          cursor: pointer;
        }
        p {
          color: #409eff;
          font-size: 14px;
          margin-left: 15px;
          cursor: pointer;
        }
      }
      .plk {
        display: flex;
        align-items: center;
        margin: 30px 0;
        p {
          color: #999;
          font-size: 14px;
        }
        span {
          color: #555;
          font-size: 14px;
          margin-left: 15px;
        }
        i {
          color: #409eff;
          font-size: 14px;
          font-style: normal;
          margin-left: 15px;
          cursor: pointer;
        }
      }
      .types {
        color: #999;
        font-size: 14px;
        span {
          color: #999;
          margin-left: 15px;
        }
        i {
          color: #409eff;
          font-size: 14px;
          font-style: normal;
          margin-left: 15px;
          cursor: pointer;
        }
      }
    }
  }
  .accountBox {
    margin-top: 30px;
    margin-left: 30px;
  }
  .account {
    display: flex;
    margin-left: 40px;
    justify-content: space-between;
    border-bottom: 1px solid #e5e5e5;
    align-items: center;
    height: 80px;
    p {
      color: #999;
      font-size: 14px;
      span {
        margin-left: 8px;
        color: #e54a4a;
        font-size: 20px;
        font-weight: 600;
      }
    }
    .btnBox {
      display: flex;
      p {
        width: 100px;
        height: 30px;
        border-radius: 20px;
        background: #ff6060;
        color: #fff;
        text-align: center;
        line-height: 30px;
        margin-left: 30px;
        cursor: pointer;
      }
      p:nth-of-type(2) {
        background: #e5e5e5;
      }
    }
  }
  .searchTab {
    display: flex;
    align-items: center;
    padding-left: 40px;
    margin-top: 30px;
    p {
      font-size: 14px;
      color: #999;
      margin-right: 15px;
    }
  }
  .childrenList {
    margin-top: 30px;
    margin-left: 30px;
  }
  .option {
    margin-top: 30px;
    margin-left: 30px;
    .c {
      display: flex;
      align-items: center;
      margin-left: 110px;
      margin-bottom: 40px;
      .iop {
        font-size: 12px;
      }
      img {
        width: 20px;
        height: 20px;
        margin-right: 30px;
      }
      .server {
        display: flex;
        height: 45px;
        align-items: center;
        p {
          margin-right: 30px;
          width: 115px;
        }
        span {
          margin-left: 15px;
        }
      }
      p {
        color: #999;
        font-style: 14px;
      }
    }
  }
}
.marBoxLeft {
  width: 15%;
  border-right: 10px solid rgba(206, 222, 249, 0.3);
  height: 100vh;
  float: left;
  .headerInfo {
    border-bottom: 10px solid rgba(206, 222, 249, 0.3);
    overflow: hidden;
    padding-bottom: 20px;
    .el-button {
      width: 100px;
      height: 25px;
      margin: 0 auto;
      display: block;
      line-height: 25px;
      padding: 0;
    }
    .link_ {
      font-size: 14px;
      color: #409eff;
      text-align: center;
      margin-top: 10px;
      cursor: pointer;
    }
    .block {
      display: flex;
      justify-content: flex-end;
      .tag {
        border-radius: 21px 0px 0px 21px;
        width: 70px;
        height: 20px;
        background: #409eff;
        color: #fff;
        text-align: center;
        line-height: 20px;
        margin-top: 15px;
        font-size: 12px;
      }
    }
    .userInfo {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      margin-top: 15px;
      > img {
        display: block;
        width: 80px;
        height: 80px;
        border-radius: 50%;
         object-fit: cover;
      }
      p {
        text-align: center;
        color: #555;
        margin: 15px 0;
        font-size: 14px;
      }
    }
  }
  .aurl {
    margin-top: 30px;
    p {
      height: 30px;
      text-align: center;
      height: 40px;
      // background: #409EFF;
      line-height: 40px;
      font-size: 16px;
      color: #555;
      cursor: pointer;
    }
    .act {
      background: #409eff;
      color: #fff;
    }
  }
}
.top {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 60px;
  .left {
    background: #ececec;
    width: 400px;
    height: 200px;
    border-radius: 10px;
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-right: 15px;
    .userInfo {
      cursor: pointer;
      > img {
        display: block;
        width: 80px;
        height: 80px;
        border-radius: 50%;
      }
      .edit {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .edit > img {
        width: 20px;
        margin-top: 15px;
        margin-left: 8px;
      }
      p {
        text-align: center;
        margin-top: 15px;
        font-size: 14px;
      }
    }
    .qrcode {
      width: 80px;
      height: 100px;
      img {
        width: 70px;
        height: 70px;
        display: block;
        background: #555;
        border-radius: 10px;
      }
      p {
        font-size: 12px;
        color: #719bef;
        text-align: center;
        margin-top: 15px;
      }
    }
  }
  .center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 200px;
    p {
      color: #555;
      font-size: 14px;
      line-height: 28px;
    }
    .btnrenew {
      display: flex;
      .el-button {
        width: 130px;
        height: 30px;
        line-height: 30px;
        padding: 0;
        margin-top: 10px;
      }
    }
  }
  .c {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 2px 0 0 0;
    width: 180px;
  }
  .a {
    display: flex;
    align-items: center;
    .el-button {
      width: 130px;
      height: 30px;
      line-height: 30px;
      padding: 0;
      margin-top: 10px;
    }
  }
}
.bot {
  margin-top: 30px;
  .el-button {
    width: 60px;
    height: 24px;
    line-height: 24px;
    padding: 0;
    margin-left: 30px;
  }
}
.tabtop {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  .el-button {
    width: 80px;
    height: 24px;
    line-height: 24px;
    padding: 0;
    margin-left: 30px;
  }
}
.xufei {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  .cen {
    background: #fff;
    border-radius: 4px;
    padding: 15px;
    .cen-tit {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      margin-bottom: 15px;
      .cs {
        text-decoration: underline;
        color: #e54a4a;
        cursor: pointer;
      }
    }
    .name {
      border-left: 2px solid #f8d598;
      font-size: 14px;
      padding-left: 10px;
    }
    .cardbox {
      display: flex;
      justify-content: space-between;
      border-bottom: 2px solid #e5e5e5;
      padding-bottom: 15px;
      .item {
        background: #f8d697;
        width: 260px;
        height: 76px;
        border-radius: 15px;
        display: flex;
        align-items: center;
        cursor: pointer;
        .item-l {
          width: 110px;
          height: 50px;
          border-right: 1px solid #fff;
          padding-left: 22px;
          span {
            color: #fff;
            font-size: 12px;
          }
          h3 {
            font-size: 22px;
            color: #fff;
          }
        }
        .item-r {
          display: flex;
          align-items: center;
          margin-left: 15px;
          p {
            border: 2px solid #fff;
            border-radius: 20px;
            color: #fff;
            font-size: 14px;
            width: 65px;
            height: 20px;
            line-height: 20px;
            text-align: center;
          }
          i {
            display: block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            border: 2px solid #fff;
            margin: -16px 0 0 18px;
            background: #fff;
          }
        }
      }
      .item2 {
        background: #c9ccd4;
        .item-r {
          i {
            background: transparent;
          }
        }
      }
    }
    .price {
      text-align: right;
      color: #999999;
      line-height: 30px;
      margin-top: 10px;
    }
    h4 {
      color: #fff;
      font-size: 14px;
      width: 100%;
      background: #f8d598;
      border-radius: 20px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      font-weight: normal;
      margin-top: 20px;
      cursor: pointer;
    }
  }
}
.showQrcode {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  .cen {
    background: #fff;
    border-radius: 4px;
    padding: 15px;
    .users {
      display: flex;
      justify-content: space-between;
      .cs {
        text-decoration: underline;
        color: #e54a4a;
        cursor: pointer;
      }
      div {
        display: flex;
        align-items: center;
      }
      img {
        width: 50px;
        height: 50px;
        display: block;
        border-radius: 50%;
      }
      p {
        color: #555;
        font-size: 14px;
        margin-left: 15px;
      }
    }
    .qr {
      width: 300px;
      height: 300px;
      display: block;
      background: #719bef;
      border-radius: 8px;
      margin: 15px 0;
    }
    .scan {
      color: #999;
      font-size: 14px;
      border-bottom: 1px solid #e5e5e5;
      padding-bottom: 10px;
    }
    .cj {
      display: flex;
      align-items: center;
      margin-top: 10px;
      cursor: pointer;
      p {
        color: #999;
        font-size: 14px;
      }
      img {
        width: 15px;
        margin-left: 10px;
      }
    }
  }
}
@media screen and (max-width: 970px) {
  .top {
    > div {
      margin-bottom: 30px;
    }
  }
}
</style>
<script>
import setChildren from "./setChildren";
import setUserInfo from "./setUserInfo";
import setPhone from "./setPhone";
import setPass from "./setPass";
import setchildrenItem from "./setchildrenItem";
import renew from "./renew";
import renewHistory from "./renewHistory";
import pdfOptions from "./showPdfSet";
import {
  updateInstead,
  updateAccount,
  updatePassword,
  childList,
  childRegister,
  childExist,
  downloadQR,
  childDel,
  childEdit,
  updateUserInfo,
  findUserInfo,
  updateGet,
  memberRenew,
  unifiedorder,
  update
} from "../utils/interface";
export default {
  components: {
    setChildren,
    setUserInfo,
    setPass,
    setPhone,
    setchildrenItem,
    renew,
    renewHistory,
    pdfOptions
  },
  data() {
    return {
      switchs: "0",
      switchs2: false,
      tableData: [],
      childrenState: false,
      userState: false,
      tabIndex: 1,
      xufeiState: false,
      qrcodeState: false,
      passworldState: false,
      phoneState: false,
      childrenItemState: false,
      renewState: false,
      pageSize: 20,
      currentPage: 1,
      total: 0,
      pageCount: 0,
      memberPrice: { m: "798.00", n: "498.00" },
      memberType: null,
      userInfo: {},
      userData: null,
      historyState: false,
      defaultImg: 'this.src="' + require("../assets/user.png") + '"',
      defaultImg3: 'this.src="' + require("../assets/person.png") + '"',
      ns: "",
      ns2: "",
      aUrlModel: 1,
      phone: "",
      tableData2: [],
      value1: [],
      options: [
        {
          value: "选项1",
          label: "充值"
        },
        {
          value: "选项2",
          label: "消费"
        },
        {
          value: "选项2",
          label: "提现"
        }
      ],
      value: "",
      tag: "",
      pdfOptionsState: false,
      optionsSelect: ""
    };
  },
  methods: {
    // 下载二维码
    getQrcode(item) {
      var img = document.getElementById("girlImg"); // 获取要下载的图片
      var url = img.src; // 获取图片地址
      var a = document.createElement("a"); // 创建一个a节点插入的document
      var event = new MouseEvent("click"); // 模拟鼠标click点击事件
      a.download = "beautifulGirl"; // 设置a节点的download属性值
      a.href = url; // 将图片的src赋值给a节点的href
      a.click();
    },
    getUser(e) {
      if (e) {
        console.log(e);
        updateUserInfo(e).then(res => {
          if (res.data.code == 200) {
            console.log(res.data);
            this.findUserInfo();
            this.bus.$emit("users", 2);
          }
        });
      }
      this.userState = false;
    },
    select(n) {
      this.tabIndex = n;
    },
    close_xufei() {
      this.xufeiState = false;
    },
    // 手改手机号
    setPhone() {
      if (this.userInfo.account_type == 1) {
        this.$message({
          type: "error",
          message: "暂无操作权限"
        });
      } else {
        this.phoneState = true;
      }
    },
    addChildAcc() {
      if (this.userInfo.account_type == 1) {
        this.$message({
          type: "error",
          message: "暂无操作权限"
        });
      } else {
        this.childrenState = true;
      }
    },
    setUserName() {
      if (this.userInfo.account_type == 1) {
        this.$message({
          type: "error",
          message: "暂无操作权限"
        });
      } else {
        this.userState = true;
      }
    },
    // 修改密码
    setPass() {
      if (this.userInfo.account_type == 1) {
        this.$message({
          type: "error",
          message: "暂无操作权限"
        });
      } else {
        this.passworldState = true;
      }
    },
    // 修改密码
    getpass(e) {
      if (e) {
        updatePassword(e).then(res => {
          if (res.data.code == 200) {
            this.$alert("设置成功，请重新登陆", "提示", {
              confirmButtonText: "确定",
              callback: action => {
                this.$router.push("/");
              }
            });
          }
        });
      } else {
      }
      this.passworldState = false;
    },
    // 修改手机号
    getPhone(e) {
      if (e) {
        updateAccount(e).then(res => {
          if (res.data.code == 200) {
            this.$alert("设置成功，请重新登陆", "提示", {
              confirmButtonText: "确定",
              callback: action => {
                this.$router.push("/");
              }
            });
          }
        });
      }
      this.phoneState = false;
    },
    getitem(e) {
      if (e) {
        childEdit(e).then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: "修改成功!"
            });
            this.getChildrenList();
          }
        });
      }
      this.childrenItemState = false;
    },
    // 会员续费
    xufei() {
      if (this.userInfo.account_type == 1) {
        this.$message({
          type: "error",
          message: "暂无操作权限"
        });
      } else {
        this.xufeiState = true;
      }
    },
    // 添加子账号
    getChildren(e) {
      if (e) {
        let _this = this;
        childExist(e).then(res => {
          if (res.data.data == 0) {
            addChild(e);
          } else {
            this.$alert("该账号系统已存在，请修改账号", "提示", {
              confirmButtonText: "确定"
            });
          }
        });

        function addChild(e) {
          childRegister(e).then(res => {
            console.log(res.data);
            if (res.data.code == 200) {
              _this.$message({
                message: "添加成功",
                type: "success"
              });
              _this.getChildrenList();
            }
          });
        }
      }
      this.childrenState = false;
    },
    // 删除子账号
    del(row) {
      if (this.userInfo.account_type == 1) {
        this.$message({
          type: "error",
          message: "暂无操作权限"
        });
        return false;
      }
      this.$confirm("删除后该子账号将无法登陆，是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          childDel([row.user_id]).then(res => {
            if (res.data.code == 200) {
              this.getChildrenList();
              this.$message({
                type: "success",
                message: "删除成功!"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 修改子账号
    edit(row) {
      console.log(row);
      if (this.userInfo.account_type == 1) {
        this.$message({
          type: "error",
          message: "暂无操作权限"
        });
        return false;
      }
      this.userData = row;
      this.childrenItemState = true;
    },
    // 代发服务
    substituteService(e) {
      this.switchs = 0;
      if (this.userInfo.account_type == 1) {
        this.$message({
          type: "error",
          message: "暂无操作权限"
        });
        return false;
      }

      this.$message({
        type: "error",
        message: "此功能即将上线"
      });

      return false;
      updateInstead({ is_instead: e }).then(res => {
        if (res.data.code == 200) {
          e == 0 ? (this.ns = "关") : (this.ns = "开");
          this.$message({
            type: "success",
            message: "设置成功!"
          });
        }
      });
    },
    // 获取子账号列表
    getChildrenList() {
      childList({
        pageSize: this.pageSize,
        currentPage: this.currentPage
      }).then(res => {
        this.tableData = res.data.data.list;
        this.pageCount = Math.ceil(res.data.data.total / this.pageSize);
        this.total = res.data.data.total;
      });
    },
    // 翻页
    currentMethods(e) {
      this.currentPage = e;
      this.getChildrenList();
    },
    // 立即续费
    new_renew() {
      this.xufeiState = false;
      let data = {};
      if (this.tabIndex == 1) {
        data.title = "捷报订单一年会员";
        // data.price = this.memberPrice.m*100;
        data.price = 79800;
        data.type = 2;
      } else if (this.tabIndex == 2) {
        data.title = "捷报订单半年会员";
        // data.price = this.memberPrice.n*100;
        data.price = 49800;
        data.type = 1;
      }
      this.memberType = data;
      this.renewState = true;
    },
    // 会员续费
    get_renew(e) {
      if (e) {
        this.$message({
          type: "success",
          message: "续费成功!"
        });
        this.findUserInfo();
      }
      this.renewState = false;
    },
    // 获取用户信息
    findUserInfo() {
      findUserInfo().then(res => {
        if (res.data.code == 200) {
          localStorage.setItem("userInfo", JSON.stringify(res.data.data));
          this.userInfo = res.data.data;
          // this.switchs = res.data.data.is_instead;
          this.switchs == 0 ? (this.ns = "关") : (this.ns = "开");

          this.switchs2 = res.data.data.is_get;
          this.switchs2 == 0 ? (this.ns2 = "关") : (this.ns2 = "开");
          this.phone =
            this.userInfo.account.substr(0, 3) +
            "****" +
            this.userInfo.account.substr(7);
          console.log(this.userInfo);
          if (this.userInfo.recharge_type && this.userInfo.recharge_type == 3) {
            this.tag = "试用会员";
          } else {
            this.tag = "正式会员";
          }
        }
      });
    },
    // 到货状态修改
    setUpdateGet(e) {
      updateGet({ is_get: e }).then(res => {
        if (res.data.code == 200) {
          e == 0 ? (this.ns2 = "关") : (this.ns2 = "开");
          console.log(this.ns2);
          this.$message({
            type: "success",
            message: "设置成功!"
          });
        }
      });
    },
    getrenewHistory() {
      this.historyState = false;
    },
    selectModel(n) {
      if (n == 2) {
        this.$message({
          type: "error",
          message: "此功能即将上线"
        });
        return false;
      }
      this.aUrlModel = n;
    },
    // 历史续费
    sethistoryState() {
      this.historyState = true;
    },
    // 打印面单参数设置
    showType(n) {
      this.optionsSelect = n;
      this.pdfOptionsState = true;
    },
    pdfOptions(e) {
      if(e){
        update(e).then(res=>{
          if(res.data.code==200){
            this.$message({
              message: res.data.message,
              type: "success"
            });
          }
        })
      }
      
      this.pdfOptionsState = false;

    }
  },
  mounted() {
    this.findUserInfo();
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    this.getChildrenList();
  }
};
</script>